<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="include/style.css"/>
    <link rel="stylesheet" type="text/css" href="themes/proffesional.css"/>
    <script src="include/jquery-1.7.2.min.js"></script>
    <script src="include/jquery.isotope.min.js"></script>
    <script src="include/script.js"></script>
    <!--<script src="include/jquery-1.7.2.min.js"></script>-->
  </head>
  <body>
    <section id="slides">
      <article>
        <h1>Using Slimy</h1>
	<h1>A tutorial on how to build slideshows with slimy</h1>
        <p>
          Yusuke Tsutsumi
          <br>
	  4/4/2012
        </p>
	<p>
	  <br/>
	  Press the right arrow,l,or click the next slide button (invisible until you hover over it) to move to the next slide, or press m for a list of commands.
	</p>
      </article>
      <article>
	<h1>What is slimy?</h1>
        <p>
	  Slime is an html 5 slideshow template. The slideshow is opened in-browser, and utilizes html5, javascript, and css.
        </p>
	<table>
	  <tr><td>Table of Contents</td></tr>
	  <tr><td><a href="#3">Why use slimy?</td></tr>
	  <tr><td><a href="#4">Controls</td></tr>
	  <tr><td><a href="#5">Advanced Usage</td></tr>
	</table>
      </article>
      <article>
	<h1>Why use slimy?</h1>
	<ul>
	  <li>Designed for simplicity: minimal features, and utilize existing html5/css technologies as much as possible</li>
	  <li>Minimal external dependencies: base is just JQuery, a style.css file, and a script.js file.</li>
        </ul>
     </article>
     <article>
       <h1>Controls</h1>
       <ul>
	 <li>left arrow/h : previous slide</li>
	 <li>right arrow/l : next slide</li>
	 <li>m: menu key</li>
	 <li>+/-: increase or decrease the size of the slide relative to the window</li>
	 <li>p: preview slides</li>
       </ul>
     </article>
     <article>
       <h1>Advanced Usage</h1>
       <p>The following slides discuss some of the more rich functionality in slimy.</p>
     </article>
     <article>
       <h1>Custom Variables</h1>
       <p>Custom variables can be set in the html file, at the top in the head section with:</p>
       <pre>
&lt;script&gt;
  var slide_scale = 0.5;
&lt;/script&gt;
       </pre>
       <p>The following variables can be customized:</p>
       <ul>
	 <li>slide_scale: the initial size of the slide.</li>
       </ul>
     </article>
     <article class="slimy_twocolumn">
       <h1>Slide Templates</h1>
       <div class="slimy_left">
	   <p>An expiremental feature is slide templates. This allows for preset styles. For example, this slide is using the twocolomn layout.</p>
	   <p>More examples will be added into the slide_examples.html file.</p>
       </div>
       <div class="slimy_right">
	 <p>To use this template, add the class "slimy_twocolumn" to your slide, and add divs with the class "slimy_left" and "slimy_right" explicitely:</p>
	 <pre>
	   &lt;article class="slimy_twocolumn"&gt;
	     &lt;div class="slimy_left"&gt;
	       LEFT STUFF
	     &lt;/div&gt;
	     &lt;div class="slimy_right"&gt;
	       RIGHT STUFF
	     &lt;/div&gt;
	   &lt;/article&gt;
         </pre>
       </div>
     </article>
     <article>
        <h1>Thank You!</h1>
     </article>
    </section>
  </body>
</html>
